<template>
      <div class="container">
    
        <div class="topBox">
              <!-- 轮播图区域 -->
           <div class="rotateContainer">
                <div class="rotateHeader"><span>运动风采</span></div>
                <el-carousel trigger="click" height="400px">
                  <el-carousel-item v-for="item in rotateImgs" :key="item.url">
                  <img class="rotateImg" :src="item.url" alt="">
                </el-carousel-item>
               </el-carousel>
           </div>
           <Notice class="Notice" />
       
   
          
         
        </div>
          <div class="middle">
            <div class="courtContainer">
                <div class="title">
                     <span>球场展示</span>
                </div>
                <div class="courtShowBox">
                  <div class="courtShowItem" v-for="(item,index) in courtShowPicture" :key="index">
                    <img :src="item.url" alt="">
                </div>
                </div>
                
            </div> 
          </div>
       </div> 
      
</template>

<script>
import Notice from '../components/Notice.vue'

export default {
  name: 'Home',
  data() {
    return {
       rotateImgs:[{url:require('../assets/img/fengcai1.jpg')},
                   {url:require('../assets/img/fengcai2.jpg')},
                   {url:require('../assets/img/fengcai3.jpg')},
                   {url:require('../assets/img/fengcai4.jpg')},
                   {url:require('../assets/img/fengcai5.jpg')}
                   ],
       courtShowPicture:[{url:require('../assets/img/court1.jpg')},
                         {url:require('../assets/img/court2.jpg')},
                         {url:require('../assets/img/court3.jpg')},
                         {url:require('../assets/img/court4.jpg')},
                         {url:require('../assets/img/court5.jpg')},
                         {url:require('../assets/img/court6.jpg')}]
     }
  },
  components: {
     Notice
  }
}
</script>

<style scoped lang="less">
  .container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: rgb(230, 233, 235);
 
  }
  .el-carousel{
    height: 400px;
    width: 875px;
    order: 1;
    margin-right: 40px;
  }

  .rotateImg{
     width: 100%;
     height: 100%;
  }
  
  .topBox{
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    height: 420px;
    
  }
  .courtContainer{
     width: 1200px;
     height: 500px;
     order: 2;

     .courtShowBox{
       width: 100%;
       height: 450px;
       background: rgba(213, 236, 235, 0.703);
       display: flex;
       justify-content: space-around;
       flex-wrap: wrap;
       box-shadow: 0 2px 1px rgb(119, 118, 118);
       border-radius: 5px;
       .courtShowItem{
        width: 305px;
        height: 200px;
        background: pink;
        margin-top: 10px;
        border-radius: 5px;
        img{
          width: 100%;
          height: 100%;
          border-radius: inherit;
        }
      }
    }
     
  }
 
  .rotateContainer{
    position: relative;
    width:875px;
    margin-right: 20px;
  }
  .rotateHeader{
    background: rgb(50, 192, 95);
    opacity: .6;
    color: beige;
    line-height: 30px;
    width: 100%;
    height: 30px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 1px 2px #282727;
    font-weight: 600;
  }
  .courtContainer .title{
    background: rgb(15, 130, 225);
    opacity: .8;
    color: rgb(250, 247, 243);  
    font-weight: 600;
    height: 30px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 2px 2px rgb(120, 119, 119);
  }
  .middle{
    display:flex;
    justify-content: center;
  }
  .Notice{
    margin-left: 5px;
  }
  </style>